// Tab icons used with permission from Drew Wilson
// http://pictos.drewwilson.com/
// Pictos icons are (c) 2010 Drew Wilson

@import '../global';

/**
 * @var {boolean} $include-tabbar-uis Optionally disable separate tabbar UIs (light and dark).
 *
 * @member Ext.TabBar
 * @xtype tabbar
 */
$include-tabbar-uis: $include-default-uis !default;

/**
 * @var {boolean} $include-top-tabs
 * Optionally exclude top tab styles by setting to false.
 *
 * @member Ext.TabBar
 * @xtype tabbar
 */
$include-top-tabs: true !default;

/**
 * @var {boolean} $include-bottom-tabs
 * Optionally exclude bottom tab styles by setting to false.
 *
 * @member Ext.TabBar
 * @xtype tabbar
 */
$include-bottom-tabs: true !default;

/**
 * @var {color} $tabs-light
 * Base color for "light" UI tabs.
 *
 * @member Ext.TabBar
 * @xtype tabbar
 */
$tabs-light: lighten(desaturate($base-color, 10%), 5%) !default;

/**
 * @var {color} $tabs-light-active
 * Active color for "light" UI tabs.
 *
 * @member Ext.TabBar
 * @xtype tabbar
 */
$tabs-light-active: saturate($active-color, 20%) !default;

/**
 * @var {color} $tabs-dark
 * Base color for "dark" UI tabs.
 *
 * @member Ext.TabBar
 * @xtype tabbar
 */
$tabs-dark: darken($base-color, 20%) !default;

/**
 * @var {color} $tabs-dark-active
 * Active color for "dark" UI tabs.
 *
 * @member Ext.TabBar
 * @xtype tabbar
 */
$tabs-dark-active-color: saturate(lighten($active-color, 30%), 70%) !default;

/**
 * @var {string} $tabs-bar-gradient
 * Background gradient style for tab bars.
 *
 * @member Ext.TabBar
 * @xtype tabbar
 */
$tabs-bar-gradient: $base-gradient !default;

/**
 * @var {string} $tabs-bottom-radius
 * Border-radius for bottom tabs.
 *
 * @member Ext.Tab
 * @xtype tab
 */
$tabs-bottom-radius: .25em !default;

/**
 * @var {string} $tabs-bottom-icon-size
 * Icon size for bottom tabs
 *
 * @member Ext.Tab
 * @xtype tab
 */
$tabs-bottom-icon-size: 1.65em !default;

/**
 * @var {string} $tabs-bottom-active-gradient
 * Background gradient style for active bottom tabs.
 *
 * @member Ext.Tab
 * @xtype tab
 */
$tabs-bottom-active-gradient: 'glossy' !default;

// Private

$tabs-top-height: $global-row-height - .8em;

/**
 * Includes default tab styles.
 *
 * @member Ext.TabBar
 * @xtype tabbar
 */
@mixin sencha-tabs {
  @if $include-top-tabs {
    @include sencha-top-tabs;
  }
  @if $include-bottom-tabs {
    @include sencha-bottom-tabs;
  }

  @if $include-tabbar-uis {
    @include sencha-tabbar-ui('light', $tabs-light, $tabs-bar-gradient, $tabs-light-active);
    @include sencha-tabbar-ui('dark', $tabs-dark, $tabs-bar-gradient, $tabs-dark-active-color);
  }

  // Rules for all tabs
  .x-tab.x-item-disabled span.x-button-label, .x-tab.x-item-disabled img {
    opacity: .5;
  }
  .x-tab.x-draggable {
    opacity: .7;
  }
}


@mixin sencha-top-tabs {

  .x-tabbar.x-docked-top {
    border-bottom: .1em solid;
    height: $global-row-height;
    padding: 0 .8em;

    .x-tab {
      margin: .4em .2em;
      padding: (($tabs-top-height - 1em) / 2) .8em;
      height: $tabs-top-height;
      @if $include-border-radius { @include border-radius($tabs-top-height / 2); }
    }

    @if ($include-highlights) {
      .x-tab-active {
        -webkit-box-shadow: rgba(#fff, .2) 0 .1em .1em, inset rgba(#000, .3) 0 .1em .2em;
      }
    }

    .x-button-label {
      font-size: .8em;
      line-height: 1.2em;
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
    }
  }
}


@mixin sencha-bottom-tabs {
  .x-tabbar.x-docked-bottom {
    border-top: .1em solid;
    height: 3em;

    .x-tab {
      @include display-box;
      @include box-direction(reverse);
      @include box-orient(vertical);
      @if $include-border-radius { @include border-radius($tabs-bottom-radius); }
      margin: .15em;
      min-width: 3.3em;
      position: relative;

      img {
        -webkit-mask-size: $tabs-bottom-icon-size;
        width: $tabs-bottom-icon-size;
        height: $tabs-bottom-icon-size;
        display: block;
        margin: .4em auto .1em;
        position: relative;
      }

      // Start of automatic tab icon shadows...
      // &:before {
      //   @include insertion;
      //   background: red;
      //   width: $tabs-bottom-icon-size;
      //   height: $tabs-bottom-icon-size;
      //   position: absolute;
      //   top: -.1em;
      // }

      .x-button-label {
        margin: 0;
        font-size: 9px;
        line-height: 12px;
        text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
      }
    }

    @if ($include-highlights) {
      .x-tab-active {
        -webkit-box-shadow: inset rgba(#fff, .3) 0 0 .1em;
      }
    }
  }

  @if $include-default-icons {
    @include pictos-iconmask('bookmarks');
    @include pictos-iconmask('download');
    @include pictos-iconmask('favorites');
    @include pictos-iconmask('info');
    @include pictos-iconmask('more');
    @include pictos-iconmask('time');
    @include pictos-iconmask('user');
    @include pictos-iconmask('team');
  }
}

/**
 * Creates a theme UI for tabbar/tab components.
 *
 * @param {string} $ui-label The name of the UI being created.
 *   Can not included spaces or special punctuation (used in class names)
 * @param {color} $bar-color Base color for the tab bar.
 * @param {string} $bar-gradient Background gradient style for the tab bar.
 * @param {color} $tab-active-color Background-color for active tab icons.
 *
 * @example
 * // SCSS
 * @include sencha-button-ui('pink', #333, 'matte', #AE537A);
 * 
 * // JS
 * var tabs = new Ext.TabPanel({
 *    tabBar: {
 *      ui: 'pink',
 *      dock: 'bottom',
 *      layout: { pack: 'center' }
 *    },
 *    ...
 * });
 * 
 * @member Ext.TabBar
 * @xtype tabbar
 */
@mixin sencha-tabbar-ui($ui-label, $bar-color, $bar-gradient, $tab-active-color) {
  .x-tabbar-#{$ui-label} {
    @include background-gradient($bar-color, $bar-gradient);
    border-color: darken($bar-color, 5%);

    .x-tab {
      @include color-by-background($bar-color, 40%);
    }

    .x-tab-active {
      @include color-by-background($bar-color, 90%);
    }

    .x-tab-pressed {
      @include color-by-background($bar-color, 100%);
    }
  }

  @if $include-bottom-tabs {
    .x-tabbar-#{$ui-label}.x-docked-bottom {
      .x-tab {
        @include bevel-by-background($bar-color);
        img {
          @include mask-by-background($bar-color, 20%, $tabs-bar-gradient);
        }
      }

      .x-tab-active {
        @include background-gradient(lighten($bar-color, 5%), $tabs-bar-gradient);
        @include bevel-by-background(lighten($bar-color, 10%));

        img {
          @include background-gradient($tab-active-color, $tabs-bottom-active-gradient);
        }
      }
    }
  }

  @if $include-top-tabs {
    .x-tabbar-#{$ui-label}.x-docked-top {

      .x-tab-active {
        @include background-gradient(darken($bar-color, 5%), 'recessed');
        @include color-by-background(darken($bar-color, 5%));
      }
    }
  }
}
